<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
    <script src="./spark-md5.js"></script> <!-- Include SparkMD5 library -->
</head>
<body>
    <input type="file" /> <!-- File input field -->
    <div id="progress"></div> <!-- Progress display -->
    <script>
        const inp = document.querySelector('input'); // Get the file input element
        const progress = document.getElementById('progress'); // Get the progress display element

        inp.onchange = async (e) => {
            const file = inp.files[0]; // Get the selected file
            if (!file) {
                return; // Exit if no file is selected
            }
    
            const smallChunks = createChunks(file, 10 * 1024 * 1024); // Create chunks of 10MB
            const finalMd5 = await hash(smallChunks); // Compute the MD5 hash of the file
            console.log('smallChunks:', smallChunks);
            console.log('Final MD5:', finalMd5);
            progress.innerText = `Final MD5: ${finalMd5}`; // Display the final MD5 hash
        };
    
        function hash(chunks) {
            const spark = new SparkMD5(); // Create a SparkMD5 instance
    
            return new Promise((resolve, reject) => {
                function _read(i) {
                    if (i >= chunks.length) {
                        resolve(spark.end()); // All chunks read, return MD5 hash
                        return;
                    }
                    const blob = chunks[i].blob;
                    const reader = new FileReader(); // Create a FileReader instance
                    reader.onload = (e) => {
                        const bytes = e.target.result;
                        spark.append(bytes); // Append chunk data to SparkMD5 instance
                        progress.innerText = `Processing chunk ${i + 1}/${chunks.length}`; // Update progress
                        _read(i + 1); // Read the next chunk
                    };
                    reader.onerror = () => {
                        reject(new Error('Error reading file')); // Handle file read error
                    };
                    reader.readAsArrayBuffer(blob); // Read chunk as ArrayBuffer
                }
    
                _read(0); // Start reading from the first chunk
            });
        }
    
        function createChunks(file, chunkSize) {
            const chunks = [];
            let offset = 0;
            let index = 0;
            while (offset < file.size) {
                const chunk = file.slice(offset, offset + chunkSize); // Create a chunk of specified size
                chunks[index] = {
                    index: index,
                    start: offset,
                    size: chunk.size,
                    blob: chunk
                };
                offset += chunkSize; // Update the offset
                index++; // Increment the index
            }
            return chunks; // Return the array of chunks
        }
    </script>
</body>
</html>
